<template>
  <div class="choose_mdl">
    <div class="top_nav">
      <img v-if="$store.state.gsign === 'gkzx'" class="logo_left" style="height: 0.5rem" src="../../../assets/img/modules/elective/logo_01.png" alt="">
      <img v-else-if="$store.state.gsign === 'linghang'" style="height: 0.5rem" class="logo_left" src="../../../assets/img/modules/elective/logo_02.png" alt="">
      <img v-else-if="$store.state.gsign === 'mhzg'" style="height: 0.3rem"  class="logo_left" src="../../../assets/img/modules/elective/logo_03.png" alt="">
      <img v-else class="logo_left" src="../../../assets/img/modules/media/icon_13_gk.png" alt="">
      <div v-if="$store.state.device !== 'APP'" class="btn_right">
        <a :href="'/media-find?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_22.png" alt=""></a>
        <a :href="'/user-member?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_24.png" alt=""></a>
       <!-- <a href="javascript:;">
          <img src="../../../assets/img/modules/media/icon_25.png" alt="">
          <img class="active" src="../../../assets/img/modules/media/icon_26.png" alt="">
        </a>-->
      </div>
    </div>
    <div class="choose_head">
      <img class="banner" src="../../../assets/img/modules/elective/banner.png" alt="">
      <span class="city"><i class="ico_area"></i>广州</span>
      <div class="title">为你优选 智能选学</div>
    </div>
    <!--搜索框-->
    <div class="search_mdl">
      <div class="search_box"  @click="$router.push({ path:'/elective-sarch' })">
        <van-icon name="search" />
        <span>搜索最适合我的学习</span>
      </div>
      <div class="label_list">
        <span v-for="item in screenLabelData.list" :key="item.tag_id"  @click="$router.push({ path:'/elective-list', query:{ tag_id: item.tag_id }})">
          {{item.tag_name}}
          <img v-if="item.icon" class="ico_hot" :src="item.icon" />
        </span>
      </div>
      <div class="btm">
        <div class="search_num"><span>{{searchNumber}}</span>人正在搜索</div>
        <div class="per_list">
          <swiper :options="swiperUserImg" ref="swiperUserImg" class="list_nav">
            <swiper-slide class="item_nav_body"><img src="../../../assets/img/modules/media/icon_32.png" alt=""></swiper-slide>
            <swiper-slide class="item_nav_body"><img src="../../../assets/img/modules/media/icon_33.png" alt=""></swiper-slide>
            <swiper-slide class="item_nav_body"><img src="../../../assets/img/modules/media/icon_34.png" alt=""></swiper-slide>
            <swiper-slide class="item_nav_body"><img src="../../../assets/img/modules/score/score_3.png" alt=""></swiper-slide>
            <swiper-slide class="item_nav_body"><img src="../../../assets/img/modules/score/score_4.png" alt=""></swiper-slide>
            <swiper-slide class="item_nav_body"><img src="../../../assets/img/modules/score/score_5.png" alt=""></swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    <van-sticky v-show="showPosition" :offset-top="0" @scroll="serollShow" :z-index="99">
      <div class="model_box">
        <div class="search_box"  @click="$router.push({ path:'/elective-sarch' })">
          <van-icon name="search" />
          <span>搜索最适合我的学习</span>
        </div>
      </div>
    </van-sticky>
    <!--补贴按钮-->
    <!--<div class="butie_btn">
      <a href="javascrtip:;"><img src="../../../assets/img/modules/elective/y_icon_3.png" alt="">领取助学金</a>
      <a href="javascrtip:;"><img src="../../../assets/img/modules/elective/y_icon_4.png" alt="">申请工会补贴</a>
    </div>-->
    <!--banner活动-->
    <div class="banner_hd">
      <a href="/subsidy-login?gsign=gkzx">
        <img src="../../../assets/img/modules/elective/banner_01.png" alt="">
      </a>
    </div>
    <!--公告-->
    <div class="notice_mdl">
      <div class="notice_slide">
        <van-notice-bar
          color="#FF801A"
          background="#ffffff"
          left-icon="bullhorn-o"
        >
          恭喜会员刘明星 3小时前成功报读2019秋物流管理 &nbsp;&nbsp;&nbsp;&nbsp;
          恭喜会员黄子健 6小时前成功报读2019秋行政管理 &nbsp;&nbsp;&nbsp;&nbsp;
          恭喜会员姚泽伟 2小时前成功报读2019秋行政管理 &nbsp;&nbsp;&nbsp;&nbsp;
        </van-notice-bar>
      </div>
    </div>
    <!--帮你选学习-->
    <div class="choose_list choose_box">
      <h3 class="choose_tit">帮你选学习</h3>
      <swiper :options="swiperChoose" ref="swiperChoose" class="slide">
        <swiper-slide>
          <div class="box" >
            <a :href="'http://m.oucgz.cn/evaluation/index.html?uniacid='+$store.state.uniacid+'&center_id='+$store.state.elective.center_id+'&gsign='+$store.state.gsign">
              <img src="../../../assets/img/modules/elective/y_icon_6.png" alt="">
              <div class="info">
                <h4>1分钟测一测，教你选适合的专业</h4>
                <p>1243已测</p>
              </div>
            </a>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="box" >
            <a :href="'http://m.oucgz.cn/evaluation2/index.html?uniacid='+$store.state.uniacid+'&center_id='+$store.state.elective.center_id+'&gsign='+$store.state.gsign">
              <img src="../../../assets/img/modules/elective/y_icon_5.png" alt="">
              <div class="info">
                <h4>选对专业学习更轻松</h4>
                <p>3221已测</p>
              </div>
            </a>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <!--推荐-->
    <div v-if="recommendList.length > 0" class="recommend choose_box">
      <h3 class="choose_tit">好专业，学员都在推荐</h3>
      <swiper :options="swiperRecommend" ref="swiperRecommend" class="list">
        <swiper-slide v-for="item in recommendList" :key="item.product_id">
          <div class="box"  @click="$router.push({ path:'/elective-detail', query:{ id: item.product_id }})">
            <div class="top">
              <span class="ico_yh">“</span>
              <div class="per">
                <img :src="item.avater" alt="">
                <span>{{item.user_name}}</span>
              </div>
            </div>
            <div class="des">{{item.ganyan}}</div>
            <div class="course">
              <img :src="item.product_img" alt="">
              <p>{{item.product_name}}</p>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <!--职业方向-->
    <div class="career choose_box">
      <h3 class="choose_tit">职业方向</h3>
      <div class="list">
        <span v-for="item in termsList" :key="item.id"  @click="$router.push({ path:'/elective-list', query:{ major_type_id: item.id }})">{{item.name}}</span>
      </div>
    </div>
    <!--优质专业-->
    <div class="major choose_box">
      <h3 class="choose_tit">优质专业</h3>
      <div class="list_data"><list-data></list-data></div>
      <!--<div class="list">
        <ul>
          <li>
            <img src="../../../assets/img/modules/elective/y_icon_5.png" alt="">
            <div class="info">
              <h3>2019春计算机科学与技术(专升本）</h3>
              <p>3740人预约报名</p>
              <span><i class="ico_hot"></i>热门专业</span>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/modules/elective/y_icon_5.png" alt="">
            <div class="info">
              <h3>2019春计算机科学与技术(专升本）</h3>
              <p>3740人预约报名</p>
              <span><i class="ico_hot"></i>热门专业</span>
            </div>
          </li>
        </ul>
      </div>-->
    </div>
    <!--遮罩层-->
    <drag-loding v-if="showLoding"></drag-loding>
  </div>
</template>
<script>
import listData from './list'
import dragLoding from '@/components/loding'
export default {
  data () {
    return {
      searchNumber: 1323,
      searchInterval: null,
      showPosition: false,
      showLoding: true, // 遮罩层
      opacityNumber: 1,
      swiperChoose: {
        slidesPerView: 1.3,
        spaceBetesPerween: 0
      },
      swiperUserImg: { // 用户头像滚动
        slidesPerView: 3,
        spaceBetween: 0,
        loop: true,
        autoplay: {
          delay: 2500,
          reverseDirection: true,
          disableOnInteraction: false
        },
        on: {
          slideChangeTransitionStart: function () {
          }
        }
      },
      swiperRecommend: { // 选学幻灯片
        slidesPerView: 1.3,
        spaceBetesPerween: 0
      },
      screenLabelData: {},
      termsList: [],
      recommendList: [] // 好友推荐
    }
  },
  components: {
    listData,
    dragLoding
  },
  methods: {
    /* wf_Huang 2019/8/26 0026 随机搜索人数 */
    setSearchNumber () {
      var _this = this
      this.searchInterval = setInterval(function () {
        _this.searchNumber = 1300 + Math.floor(100 - (Math.random() * 200))
      }, 3000)
    },
    /*
       *@author wf_Huang
       *@Time 2019/8/16 0016 16:39
       *@function  滚动搜搜框
       *****************************************/
    serollShow (data) {
      if (data.scrollTop > 130) {
        this.showPosition = true
      } else {
        this.showPosition = false
      }
    },
    getScreenLabel () {
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/tagapi/getTagList.html?school_id=${this.$store.state.elective.school_id}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          // this.$toast('标签列表查询失败~')
          return false
        }
        this.screenLabelData = res.data
      }).catch(() => {})
    },
    getTerms () {
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/apis/getMajorTypeList.html?school_id=${this.$store.state.elective.school_id}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          // this.$toast('分类列表查询失败~')
          return false
        }
        this.termsList = res.data
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/19 0019 19:25
     *@function  获取好专业 好学员推荐
     *****************************************/
    getRecommend () {
      this.$http({
        url: `${window.SITE_CONFIG['personalURL']}/api/ajax.app_new/stuRecList?gsign=${this.$store.state.gsign}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 200) {
          // this.$toast('好专业列表查询失败~')
          return false
        }
        this.recommendList = res.data || []
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/14 0014 19:33
     *@function  打开专业报读
     *****************************************/
    openPersonal () {
      this.$router.push({ path: '/personal-authorize',
        query: { device: this.$store.state.elective.device,
          gsign: this.$store.state.gsign,
          uniacid: this.$store.state.uniacid } })
    },
    /*
    *@author wf_Huang
    *@Time 2019/8/13 0013 11:51
    *@function  微信授权
    *****************************************/
    getWx () {
      var pageUrl = encodeURIComponent(window.location.href)
      window.location.href = `http://wechat.eenet.com/eeapi.php?myaction=oauth&uniacid=${this.$route.query.uniacid}&scope=base&backurl=${pageUrl}`
    }
  },
  mounted () {
    if (this.$route.query.school_id) {
      this.$store.state.elective.school_id = this.$route.query.school_id
    }
    if (this.$route.query.center_id) {
      this.$store.state.elective.center_id = this.$route.query.center_id
    }
    if (this.$route.query.gsign) {
      this.$store.state.gsign = this.$route.query.gsign
    }
    if (this.$route.query.device) {
      this.$store.state.device = this.$route.query.device
    }
    if (this.$route.query.uniacid) {
      this.$store.state.uniacid = this.$route.query.uniacid
    }
    if (this.$route.query.openid) {
      this.$store.state.openid = this.$route.query.openid
      this.showLoding = false
    } else {
      if (this.$store.state.device === 'WX') {
        this.getWx()
      } else {
        this.showLoding = false
      }
    }
    // &ismian=0
    if (this.$route.query.ismian !== undefined) {
      this.$store.state.elective.ismian = this.$route.query.ismian
    } else {
      this.$store.state.elective.ismian = '1'
    }
    localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    this.getScreenLabel()
    this.getTerms()
    this.getRecommend()
    this.setSearchNumber()
  },
  destroyed () {
    var _this = this
    clearInterval(_this.searchInterval)
  }
}
</script>
<style lang="scss" scoped>
.choose_mdl {
  background: #f5f5f5;
  .top_nav{
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:  0 32px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    background-color: #ffffff;
    .logo_left{
        width: auto;
        height: 40px;
      }
    .nav_list{
      display: flex;
      margin: 0 auto;
      .nav_item{
        font-size: 28px;
        color: #999999;
        position: relative;
        padding: 0 15px;
      }
      .active{
        color: #027FFE;
        &:after{
          content: '';
          width: 24px;
          border-radius: 5px;
          height: 8px;
          background-color: #027FFE;
          position: absolute;
          bottom: -20px;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .btn_right{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      a{
        height: 100%;
        display: flex;
        padding: 0 10px;
        position: relative;
        img{
          width: 36px;
          height: 34px;
        }
        .active{
          width: 18px;
          height: 18px;
          position: absolute;
          right: 5px;
          top: 1px;
        }
      }
    }
  }
  .list_data{
    margin: -30px -30px;
  }
  .choose_head {
    margin-top: 90px;
    width: 100%;
    height: 300px;
    position: relative;
    .banner {
      width: 100%;
      height: 300px;
    }
    .title {
      font-size: 48px;
      color: #fff;
      line-height: 60px;
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      margin-top: -20px;
    }
    .city {
      display: inline-block;
      padding: 0 30px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      font-size: 28px;
      color: #fff;
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      left: 42px;
      top: 54px;
      border-radius: 32px;
      i {
        display: inline-block;
        width: 18px;
        height: 24px;
        background: url(../../../assets/img/modules/elective/y_icon_1.png)
          no-repeat;
        background-size: 18px 24px;
        margin-right: 10px;
        position: relative;
        top: 2px;
      }
    }
  }
  .search_mdl {
    position: relative;
    z-index: 2;
    width: 686px;
    padding: 40px 30px;
    background: #fff;
    border-radius: 10px;
    margin: -70px auto 0;
    box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.1);
    .search_box {
      height: 66px;
      line-height: 66px;
      background: #f3f3f3;
      border-radius: 33px;
      font-size: 28px;
      color: #666;
      margin-bottom: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      i{
        font-size: 32px;
      }
    }
    .label_list {
      font-size: 0;
      overflow: hidden;
      margin-bottom: -20px;
      margin-right: -20px;
      span {
        display: inline-block;
        height: 54px;
        line-height: 54px;
        font-size: 24px;
        color: #666;
        padding: 0 20px;
        border: 2px solid #e5e5e5;
        margin-right: 20px;
        margin-bottom: 20px;
        border-radius: 4px;
        .ico_hot {
          display: inline-block;
          width: 20px;
          height: 20px;
          margin-left: 10px;
          position: relative;
          top: 2px;
        }
        span:active {
          color: #ff0000;
          border-color: #ff0000;
        }
      }
    }
    .btm {
      margin-top: 40px;
      height: 40px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .search_num {
        font-size: 24px;
        line-height: 40px;
        color: #666;
        display: flex;
        align-items: center;
        span {
          margin-right: 10px;
          font-size: 36px;
          line-height: 40px;
          color: #027ffe;
        }
      }
      .per_list {
        width: 100px;
        padding: 0 10px;
        .list_nav{
          border-radius: 110px;
          overflow-x: auto;
          overflow-y: auto;
        }
        .item_nav_body{
          border-radius: 100px;
          img {
            width: 40px;
            height: 40px;
            border-radius: 100px;
            display: block;
            margin: 0 auto;
          }
        }
      }
    }
  }
  .model_box{
    position: fixed;
    top: 90px;
    left: 0;
    right: 0;
    height: 90px;
    background-color: #ffffff;
    padding: 10px 60px;
    z-index: 99;
    box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.1);
    .search_box {
      height: 66px;
      line-height: 66px;
      background: #f3f3f3;
      border-radius: 33px;
      font-size: 28px;
      color: #666;
      margin-bottom: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      i{
        font-size: 32px;
      }
    }
  }
  .butie_btn {
    width: 686px;
    height: 90px;
    margin: 30px auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.1);
    a {
      display: block;
      float: left;
      width: 50%;
      height: 90px;
      line-height: 80px;
      padding: 10px 0;
      text-align: center;
      font-size: 28px;
      color: #222222;
      position: relative;
      img {
        vertical-align: top;
        width: 80px;
        height: 80px;
      }
    }
    a:first-child:before {
      height: 40px;
      width: 1px;
      background: #e5e5e5;
      position: absolute;
      content: "";
      right: 0;
      top: 25px;
    }
  }
  .banner_hd{
    padding: 30px;
    a{
      img{
        width: 686px;
        height: 176px;
      }
    }
  }
  .notice_mdl {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    .notice_ico {
      display: inline-block;
      width: 32px;
      height: 28px;
      float: left;
      margin-right: 20px;
      margin-top: 22px;
    }
    .notice_slide {
      overflow: hidden;
      height: 72px;
      ul li {
        font-size: 24px;
        line-height: 72px;
        color: #ff801a;
      }
    }
  }
  .choose_box{
    background: #fff;
    padding: 40px 30px;
    margin-bottom:20px;
  }
  .choose_tit {
    font-size: 40px;
    color: #222;
    margin: 0 0 30px;
  }
  .choose_list {
    .slide {
      .box {
        margin:20px;
        height: 180px;
        padding: 30px;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
        img {
          width: 120px;
          height: 120px;
          float: left;
          margin-right: 20px;
        }
        .info {
          overflow: hidden;
          h4 {
            margin: 0;
            font-size: 32px;
            color: #222;
            line-height: 40px;
          }
          p {
            font-size: 24px;
            color: #666;
            line-height: 30px;
          }
        }
      }
    }
  }
  .recommend{
    .list{
      .box{
        margin:20px;
        height:410px;
        padding:30px;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top{
          height:40px;
          overflow:hidden;
          margin-bottom:20px;
          .ico_yh{
            width:40px;
            height:40px;
            float:left;
            font-size:60px;
            line-height:40px;
          }
          .per{
            float:right;
            height:40px;
            line-height:40px;
            font-size:0;
            span{
              font-size:24px;
              color:#999;
              line-height:40px;
              vertical-align: top;
            }
            img{
              width:40px;
              height:40px;
              border-radius:100%;
              margin-right:10px;
              vertical-align: top;
            }
          }
        }
        .des{
          font-size:28px;
          color:#222;
          line-height:40px;
          height: 200px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          -webkit-line-clamp: 5;
        }
        .course{
          border-top:1px solid #e5e5e5;
          padding-top:20px;
          margin-top:20px;
          font-size:0;
          img{
            float:left;
            width:60px;
            height:60px;
            margin-right:20px;
          }
          p{
            overflow: hidden;
            font-size:24px;
            line-height:30px;
            color:#999;
            margin:0;
          }
        }
      }
    }
  }
  .career{
    font-size:0;
    background: url("../../../assets/img/modules/elective/bg_gd.png") no-repeat center;
    background-size: 100% 100%;
    .list{
      overflow: hidden;
      padding:20px 0 5px;
      margin-bottom:-30px;
      span{
        display:inline-block;
        height:70px;
        line-height:70px;
        padding:0 30px;
        font-size:28px;
        color: #222222;
        border:1px solid rgba(229,229,229,1);
        background:#fff;
        border-radius:35px;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08);
        margin-right:30px;
        margin-bottom:30px;
      }
    }
  }
  .major{
    font-size:0;
    .list{
      ul{
        li{
          overflow:hidden;
          height:180px;
          margin-bottom:30px;
          img{
            width:180px;
            height:180px;
            float:left;
            margin-right:30px;
          }
          .info{
            overflow:hidden;
            h3{
              font-size:32px;
              color:#222;
              line-height:44px;
              height:80px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              -webkit-line-clamp: 2;
              margin:0 0 20px;
            }
            p{
              font-size:24px;
              color:#666;
              margin:0 0 20px;
            }
            span{
              display:inline-block;
              height:34px;
              line-height:34px;
              background:#FFF8EB;
              font-size:22px;
              color:#FF0000;
              padding:0 15px;
              border-top-left-radius: 17px;
              border-bottom-right-radius: 17px;
              .ico_hot{
                display: inline-block;
                width: 16px;
                height: 20px;
                background: url(../../../assets/img/modules/elective/icon_hot.png)
                  no-repeat;
                background-size: 16px 20px;
                margin-right: 10px;
                position: relative;
                top: 2px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
